<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面配置</title>
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>

<body>
    <div id="app">
        <el-card style="background-color: white;">
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" @click="AddGroup">添加方案</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="Add">新增页面</el-button>
                </el-form-item>
            </el-form>
            <el-row>
                <el-col :span="5">
                    <div class="table_titel">
                        <div class="titel">页面结构图
                            <span @click="handleNodeClick({Page_Type_SerialNumber:''})" v-show="form.Page_Type_SerialNumber" style="font-weight: 100;color: #409EFF; cursor: pointer;">恢复</span>
                        </div>
                    </div>
                    <el-tree :expand-on-click-node="false" default-expand-all node-key="Page_Type_SerialNumber" @node-click="handleNodeClick"
                        :data="treeData">
                        <template v-slot="{data}">
                            <span :style="{color:form.Page_Type_SerialNumber==data.Page_Type_SerialNumber?'#67C23A':''}">{{data.Page_Type_Name}}</span>
                        </template>
                    </el-tree>
                </el-col>
                <el-col :span="19">
                    <el-tabs v-model="Page_Group_SerialNumber" type="card">
                        <el-tab-pane v-for="(item,index) in PageGroup" :key="index" :label="item.Page_Group_Name"
                            :name="item.Page_Group_SerialNumber">
                        </el-tab-pane>
                    </el-tabs>
                    <el-table :data="tableData" stripe border style="width: 100%" height="calc(100vh - 250px)">
                        <el-table-column align="center" label="序号" width="50" type="index"></el-table-column>
                        <el-table-column align="center" prop="Page_SerialNumber" label="页面流水号"></el-table-column>
                        <el-table-column align="center" prop="Page_Name" label="页面名称"></el-table-column>
                        <el-table-column align="center" prop="Page_Type_Name" label="页面类型"></el-table-column>
                        <el-table-column align="center" prop="Leven" label="状态">
                            <template v-slot="{row}">
                                <el-tag :type="row.Type_Status=='0'?'success':'danger'">{{row.Type_Status=='0'?'生效中':'未生效'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="Start_Date" label="生效日期"></el-table-column>
                        <el-table-column align="center" prop="End_Date" label="过期日期">
                            <template v-slot="{row}">
                                {{row.End_Date?row.End_Date:'长期有效'}}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="180">
                            <template v-slot="{row}">
                                <el-button type="success" size="small" icon="el-icon-s-grid"
                                    @click="Config(row.Page_SerialNumber)">配置</el-button>
                                <el-dropdown size="small" trigger="click">
                                    <el-button size="small" type="primary">
                                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item style="margin-bottom: 5px;">
                                            <el-button type="primary" size="small" @click="Edit(row.Page_SerialNumber)">修改</el-button>
                                        </el-dropdown-item>
                                        <el-dropdown-item style="margin-bottom: 5px;">
                                            <el-button type="danger" size="small" @click="Delete(row.Page_SerialNumber)">删除</el-button>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination style="margin-top: 5px;" background v-show="total > 0"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                        :page-sizes="[10, 20, 30, 50]" :page-size="form.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>
    </div>
    <script type="text/javascript" src="../../../utils/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/Page.js"></script>
</body>

</html>